<template>
  <div class="app-container">
    <el-button style="margin-bottom: 20px; margin-right: 20px" @click="clearFilter">清除所有过滤器</el-button>
    <el-button type="success" style="margin-bottom: 20px" @click="dialogVisible = true">
      <i class="el-icon-plus">新增</i>
    </el-button>
    <el-collapse style="margin-bottom: 20px;">
      <el-collapse-item>
        <template slot="title">
          <i class="header-icon el-icon-search" style="color: #20a0ff">&nbsp;精准搜索</i>
        </template>
        <el-row :gutter="10" style="font-size: 15px;color: #909399">
          <el-col :span="1">
            <span>项目名称</span>
          </el-col>
          <el-col :span="3">
            <el-input
              v-model="queryParams.project_name"
              placeholder="请输入项目名称"
              clearable
              size="mini"
              @keyup.enter.native="handleQuery"
            />
          </el-col>
          <el-col :span="1" :offset="1">
            <span>部门ID</span>
          </el-col>
          <el-col :span="3">
            <el-input
              v-model="queryParams.dept_id"
              placeholder="请输入部门ID"
              clearable
              size="mini"
            />
          </el-col>
          <el-col :span="1" :offset="1">
            <span>负责人</span>
          </el-col>
          <el-col :span="3">
            <el-input
              v-model="queryParams.leader"
              placeholder="请输入负责人名称"
              clearable
              size="mini"
            />
          </el-col>
          <el-col :span="2" :offset="1">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          </el-col>
          <el-col :span="1">
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>

    <el-table
      ref="filterTable"
      v-loading="loading"
      :header-cell-style="headClass"
      :data="tableData.filter(data => !search || data.project_name.toLowerCase().includes(search.toLowerCase()))"
      stripe
      highlight-current-row
      element-loading-text="Loading"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <div class="table-expand">
            <el-row class="table-expand-row">
              <el-col :span="2">
                <span class="table-expand-name">项目编号</span>
              </el-col>
              <el-col :span="3">
                <span class="table-expand-value">{{ props.row.project_id }}</span>
              </el-col>
              <el-col :span="2">
                <span class="table-expand-name">项目名称</span>
              </el-col>
              <el-col :span="4">
                <span class="table-expand-value">{{ props.row.project_name }}</span>
              </el-col>
            </el-row>
            <el-row class="table-expand-row">
              <el-col :span="2">
                <span class="table-expand-name">部门名称</span>
              </el-col>
              <el-col :span="3">
                <span class="table-expand-value">{{ props.row.dept_name }}</span>
              </el-col>
              <el-col :span="2">
                <span class="table-expand-name">负责人</span>
              </el-col>
              <el-col :span="4">
                <span class="table-expand-value">{{ props.row.leader }}</span>
              </el-col>
            </el-row>
            <el-row class="table-expand-row">
              <el-col :span="2">
                <span class="table-expand-name">级别</span>
              </el-col>
              <el-col :span="3">
                <span class="table-expand-value">{{ props.row.level }}</span>
              </el-col>
              <el-col :span="2">
                <span class="table-expand-name">经费</span>
              </el-col>
              <el-col :span="4">
                <span class="table-expand-value">{{ props.row.funds }}  ¥</span>
              </el-col>
            </el-row>
            <el-row class="table-expand-row">
              <el-col :span="2">
                <span class="table-expand-name">项目进度</span>
              </el-col>
              <el-col :span="3">
                <el-link :href="'http://localhost:9528/#/progress/'+props.row.project_id" type="success" style="color: #42b983">查看进度
                  <i class="el-icon-view el-icon--right" />
                </el-link>
              </el-col>
              <el-col :span="2">
                <span class="table-expand-name">项目成员</span>
              </el-col>
              <el-col :span="16">
                <span v-for="item in props.row.users" :key="item" style="color: #42b983">
                  {{ item }}
                </span>
              </el-col>
            </el-row>
            <el-row class="table-expand-row">
              <el-col :span="2">
                <span class="table-expand-name">简介</span>
              </el-col>
              <el-col :span="20">
                <span style="color: #42b983">{{ props.row.profiles }}</span>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="project_id"
        label="项目编号"
        sortable
        column-key="project_id"
        width="180"
        align="center"
      />
      <el-table-column
        prop="project_name"
        label="项目名称"
        sortable
        column-key="project_id"
        width="300"
        align="center"
      />
      <el-table-column
        prop="dept_name"
        label="所属部门"
        sortable
        column-key="project_id"
        width="300"
        align="center"
        :filters="filters.dept_name"
        :filter-method="filterHandler"
      />
      <el-table-column
        prop="level"
        label="项目级别"
        sortable
        column-key="project_id"
        width="300"
        align="center"
        :filters="filters.level"
        :filter-method="filterHandler"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.level | levelFilter"
            disable-transitions
          >{{ scope.row.level }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="leader"
        label="负责人"
        sortable
        column-key="project_id"
        width="300"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="'primary'" disable-transitions>{{ scope.row.leader }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="{}">
          <el-input
            v-model="search"
            size="mini"
            placeholder="仅支持项目名称关键字搜索"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          ><i class="el-icon-edit">编辑</i>
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          ><i class="el-icon-delete">删除</i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增 -->
    <el-dialog
      title="添加项目"
      :visible.sync="dialogVisible"
      width="600px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="right">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item prop="project_name" label="项目名称">
              <el-input v-model="form.project_name" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="dept_id" label="部门编号">
              <el-input v-model="form.dept_id" placeholder="请输入部门编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item prop="leader" label="负责人">
              <el-input v-model="form.leader" placeholder="请输入负责人名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="funds" label="经费">
              <el-input v-model="form.funds" placeholder="请输入经费" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="level" label="级别">
              <el-select v-model="form.level" placeholder="请选择级别">
                <el-option
                  v-for="item in level"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item prop="profiles" label="简介">
              <el-input
                v-model="form.profiles"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 更新 -->
    <el-dialog
      title="更新项目"
      :visible.sync="dialogVisibleUpdate"
      width="600px"
    >
      <el-form label-width="80px" label-position="right">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="项目名称">
              <el-input v-model="updateForm.project_name" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门编号">
              <el-input v-model="updateForm.dept_id" placeholder="请输入部门编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="负责人">
              <el-input v-model="updateForm.leader" placeholder="请输入负责人名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经费">
              <el-input v-model="updateForm.funds" placeholder="请输入经费" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="级别">
              <el-select v-model="updateForm.level" placeholder="请选择级别">
                <el-option
                  v-for="item in level"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="增加人员">
              <el-input v-model="add" placeholder="增加的id,以空格间隔" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="删除人员">
              <el-input v-model="remove" placeholder="删除的id,以空格间隔" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="简介">
              <el-input
                v-model="updateForm.profiles"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addProject, getListCondition, updateProject, deleteProject } from '@/api/project'
import { getDeptName } from '@/api/dept'
import { Message } from 'element-ui'

export default {
  filters: {
    levelFilter(level) {
      const levelMap = {
        '国家级': 'danger',
        '省级': 'warning',
        '市级': 'info'
      }
      return levelMap[level]
    }
  },
  data() {
    return {
      loading: true,
      tableData: [],
      level: [{
        value: '国家级',
        label: '国家级'
      }, {
        value: '省级',
        label: '省级'
      }, {
        value: '市级',
        label: '市级'
      }],
      filters: {
        dept_name: [],
        level: [{
          text: '国家级', value: '国家级'
        }, {
          text: '省级', value: '省级'
        }, {
          text: '市级', value: '市级'
        }]
      },
      search: '',
      dialogVisible: false,
      form: {
        project_name: '',
        dept_id: undefined,
        leader: '',
        funds: '',
        profiles: '',
        level: ''
      },
      rules: {
        project_name: { required: true, trigger: 'blur', message: '项目名不能为空' },
        dept_id: { required: true, trigger: 'blur', message: '部门编号不能为空' },
        leader: { required: true, trigger: 'blur', message: '不能为空' },
        level: { required: true, trigger: 'blur', message: '不能为空' }
      },
      queryParams: {
        project_name: '',
        dept_id: '',
        leader: ''
      },
      dialogVisibleUpdate: false,
      add: '',
      remove: '',
      updateForm: {
        project_id: '',
        project_name: '',
        dept_id: undefined,
        leader: '',
        funds: '',
        profiles: '',
        level: '',
        add: [],
        remove: []
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },

    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },

    handleEdit(index, row) {
      // console.log(index, row)
      this.dialogVisibleUpdate = true

      this.updateForm.project_id = row.project_id
      this.updateForm.project_name = row.project_name
      this.updateForm.dept_id = row.dept_id
      this.updateForm.leader = row.leader
      this.updateForm.level = row.level
      this.updateForm.funds = row.funds
      this.updateForm.profiles = row.profiles
    },

    submitUpdate() {
      this.updateForm.add = this.add.split(/[ ]+/)
      this.updateForm.remove = this.remove.split(/[ ]+/)

      updateProject(this.updateForm)

      this.dialogVisibleUpdate = false
      this.$router.go(0)
    },

    handleDelete(index, row) {
      console.log(index, row)
      this.$confirm('此操作将删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProject(row.project_id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$router.go(0)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    handleAdd() {
      this.dialogVisible = true

      this.$refs.form.validate(valid => {
        if (valid) {
          addProject(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })

      this.dialogVisible = false
      this.$router.go(0)
    },

    handleQuery() {
      if (this.queryParams.project_name && this.queryParams.dept_id && this.queryParams.leader) {
        this.loading = true
        getListCondition(this.queryParams).then(response => {
          this.tableData = response.data
          this.loading = false
        })
      } else {
        Message({
          message: '请输入完整的参数',
          type: 'error',
          duration: 5 * 1000
        })
      }
    },

    resetQuery() {
      this.queryParams = {
        project_name: undefined,
        dept_name: undefined,
        leader: undefined
      }
      this.fetchData()
    },

    fetchData() {
      this.loading = true
      getList().then(response => {
        this.tableData = response.data
      })

      getDeptName().then(response => {
        response.data.forEach(item => {
          this.filters.dept_name.push({ text: item, value: item })
        })
      })

      this.loading = false
    },

    headClass() {
      return 'background:#F2F6FC;'
    }
  }
}
</script>

<style lang="scss" scoped>
.table-expand {
  font-size: 15px;
  padding: 20px 50px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .table-expand-row {
    margin-bottom: 20px;
  }

  .table-expand-name {
    color: #99a9bf;
  }

  .table-expand-value {
    color: #e96900;
  }
}
</style>
